<template>
  <UseViewPopup :width="width" :height="height">
    <UseMoveableBox>
      <!-- 弹窗头 -->
      <template #header>
        <div class="window-header" :style="headerStyle">
          <span class="title-text">
            {{ title.text }}
          </span>
          <ul class="left-tools">
            <li class="close-bt" @click="($event) => closePopupWindow($event)">
              <jc-icon name="window-close" />
            </li>
          </ul>
        </div>
      </template>
      <!-- 弹窗体 -->
      <template #body>
        <div class="window-dody" :style="bodyStyle">
          <slot></slot>
        </div>
      </template>
    </UseMoveableBox>
  </UseViewPopup>
</template>

<script lang="ts">
export default {
  name: 'PopupWithToolsbar'
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import UseViewPopup from './basics/WindowPopup.vue'
import UseMoveableBox from './basics/MoveByHeaderBox.vue'
import { closePopup } from '../store'

const props = withDefaults(
  defineProps<{
    id: string // 窗口的 ID，由存储统一调配
    width?: string
    height?: string
    title?: {
      text: string
      color: string
    }
    headerBgColor?: string
    bodyBgColor?: string
  }>(),
  {
    width: '389px',
    height: '180px',
    title: () => {
      return {
        text: 'Information',
        color: 'black'
      }
    },
    headerBgColor: '#cdcdcd',
    bodyBgColor: '#ffffff'
  }
)

const headerStyle = ref(
  `--header-title-bgColor:${props.headerBgColor}; --header-title-text-color:${props.title.color};`
)
const bodyStyle = ref(`--body-bgColor:${props.bodyBgColor};`)

/**关闭弹窗 */
function closePopupWindow(...params: any[]) {
  closePopup(props.id)
}

/**弹窗获取焦点 */
function getFocus() {}
</script>

<style lang="scss" scoped>
.window-header {
  pointer-events: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 26px;
  background-color: var(--header-title-bgColor);
  cursor: move;

  span.title-text {
    user-select: none;
    padding-left: 6px;
    color: var(--header-title-text-color);
    white-space: nowrap;
    font-weight: 600;
  }

  ul.left-tools {
    pointer-events: auto;
    height: 100%;
    width: 26px;
    font-size: smaller;

    li {
      height: 26px;
      width: 26px;
      list-style: none;
      cursor: pointer;
      display: grid;
      place-content: center;
    }

    li.close-bt {
      &:hover {
        color: #ffffff;
        background-color: red;
      }
    }
  }
}

.window-dody {
  pointer-events: auto;
  width: 100%;
  height: 100%;
  background-color: var(--body-bgColor);
  /* background-color: #ffffff; */
}
</style>
